
  <template>
  <div>
    <div class="top">
      <van-tabs v-model="active" @change="events">
        <van-tab
          v-for="item in top"
          :name="item.name"
          :key="item.id"
          :title="item.name"
        ></van-tab>
      </van-tabs>
    </div>

    <div class="info">
      <p>{{ currentNav.name }}</p>
      <p>{{ currentNav.front_desc }}</p>
    </div>

    <div class="list" v-if="flag">
      <router-link
        tag="div"
        :to="`/category/list/info?id=${item.id}`"
        class="item"
        v-for="item in list"
        :key="item.id"
      >
        <img :src="item.list_pic_url" alt="" width="150px" height="150px" />

        <p>{{ item.name }}</p>
        <p class="bottom">¥{{ item.retail_price }}</p>
      </router-link>
    </div>

    <div class="none" v-else>数据库暂无数据...</div>
  </div>
</template>
<script>
import { goodsList, categoryNav } from "@/api/category/list";
export default {
  data() {
    return {
      list: [],
      top: [],
      active: "",

      currentNav: {},
      flag: true,
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    events(val, val1) {
      console.log(val, val1);

      // this.name = val;
      var item = this.top.find((ele) => {
        return ele.name == val;
      });

      goodsList({
        categoryId: item.id,
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
        if (this.list.length == 0) {
          this.flag = false;
        }
        this.currentNav = res.data.currentNav;
      });
    },

    init() {
      goodsList({
        categoryId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;

        this.currentNav = res.data.currentNav;
      });

      categoryNav({
        id: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.top = res.data.navData;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.info {
  width: 100%;
  height: 70px;
  padding: 14px;
  margin: 10px 0 2px 0;
  // border: 1px solid red;
  box-sizing: border-box;

  p:first-child {
    // margin-bottom: 0.24rem;
    margin-top: 2px;
    font-size: 0.4rem;
    color: #333;
  }
  p:nth-child(2) {
    height: 0.32rem;
    font-size: 0.32rem;
    color: #999;
  }
}

.list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 49%;
    p:first-child {
      margin: 0.2rem 0 0.29333rem 0;
      text-align: center;
      padding: 0 0.26667rem;
      font-size: 0.32rem;
    }

    .bottom {
      font-size: 0.4rem;
      color: #b4282d;
    }
    img {
      width: 100%;
    }
  }
}

.none {
  height: 100%;
  text-align: center;
  margin-top: 1.33333rem;
  color: #999;
  // background-color: #f4f4f4;
}
</style>
